@import "./reset";
@import "./common";
// 头部
header {
    .top {
        .Back {
            width: vw(125);
            height: vw(60);
            border: vw(4) solid rgb(255, 147, 68);
            border-radius: vw(20);
            text-align: center;
            h1 {
                font-size: vw(24);
                font-weight: normal;
                line-height: vw(52);
            }
        }
        .discover {
            font-size: vw(26);
            h2 {
                font-weight: normal;
            }
        }
    }
    // 大家都在搜索的内容
    .bottom {
        width: vw(515);
        margin: 0 auto;
        text-align: center;
        @include display-fx;
        flex-direction: column;
        align-items: center;
        div:nth-of-type(2) {
            margin-top: vw(32);
            span {
                font-size: vw(26);
            }
        }
        ul {
            @include display-fx;
            flex-wrap: wrap;
            margin-top: vw(20);
            li {
                a {
                    font-size: vw(20);
                    color: rgb(73, 73, 73);
                    display: inline-block;
                    width: vw(125);
                    height: vw(65);
                    line-height: vw(65);
                    background: rgb(220, 220, 220);
                    margin-bottom: vw(5);
                }
                a:hover {
                    transform: scale(1.2);
                    transition: all 1s;
                    color: rgb(255, 255, 255);
                    background: rgb(255, 147, 68);
                }
            }
        }
    }
}
// 主体内容
section {
    width: vw(750);
    // 热门搜索
    .hot {
        .list {
            width: vw(710);
            margin: vw(38) auto;
            @include display-fx;
            .left a {
                display: inline-block;
                width: vw(280);
                height: vw(352);
                background: url(../image/discover/图层-11.png) no-repeat;
                background-size: cover;
                background-position: center;
            }
            .right {
                width: vw(422);
                height: vw(352);
                @include display-fx;
                flex-direction: column;
                div:first-of-type a {
                    display: inline-block;
                    width: vw(422);
                    height: vw(148);
                    background: url(../image/discover/图层-2.png) no-repeat;
                    background-size: cover;
                    background-position: center;
                }
                div:last-of-type {
                    @include display-fx;
                    div:first-of-type a {
                        display: inline-block;
                        width: vw(195);
                        height: vw(198);
                        background: url(../image/discover/图层-31.png) no-repeat;
                        background-size: cover;
                        background-position: center;
                    }
                    div:last-of-type a {
                        display: inline-block;
                        width: vw(215);
                        height: vw(198);
                        background: url(../image/discover/图层-41.png) no-repeat;
                        background-size: cover;
                        background-position: center;
                    }
                }
            }
            a:hover {
                border: vw(2) solid rgb(255, 147, 68);
            }
        }
    }
    // 推荐搜索
    .recommend {
        // 图片列表
        .list {
            width: vw(710);
            margin: vw(50) auto;
            display: flex;
            justify-content: space-between;
            div {
                width: vw(212);
                height: vw(200);
            }
            div:first-of-type {
                background: url(../image/discover/图层-51.png) no-repeat;
                background-size: cover;
            }
            div:nth-of-type(2) {
                background: url(../image/discover/图层-61.png) no-repeat;
                background-size: cover;
                background-position: center;
            }
            div:last-of-type {
                background: url(../image/discover/图层-71.png) no-repeat;
                background-size: cover;
            }
        }
    }
}